<!-- 编辑地址 -->
<template>
	<view>
		<navbar :isFixed="true" title="编辑地址" :borderBottom="false"></navbar>
		<view class="item flex_align">
			<view class="name">姓名</view>
			<input type="text" :value="name" placeholder="请使用真实姓名">
		</view>
		<view class="item flex_align">
			<view class="name">手机号码</view>
			<input type="number" :value="mobile" placeholder="请输入手机号">
		</view>
		<view class="item flex_bet_align" @click="chooseSite">
			<view class="flex_align">
				<view class="name">所在地区</view>
				<view class="site">{{site}}</view>
			</view>
			<view class="iconfont icon-xwtubiaoku-03"></view>
		</view>
		<view class="item flex_align">
			<view class="name">详细地址</view>
			<input type="text" :value="detail" placeholder="街道、楼牌号等">
		</view>
		<view class="setDefault flex_bet_align">
			<view class=" flex_align" @click="setDefault">
				<view class="iconfont icon-xuanzhong" :class="checked?'checked':''"></view>
				<view>设为默认地址</view>
			</view>
			<view class="flex_align" @click="delAddress">
				<view class="iconfont icon-cangpeitubiao_shanchu"></view>
				<view>删除该地址</view>
			</view>
		</view>
		<view style="height: 135rpx;"></view>
		<view class="btn">保存</view>
	</view>
</template>

<script>
	import navbar from '@/uview-ui/components/u-navbar/u-navbar.vue';
	export default {
		components:{
			navbar
		},
		data() {
			return {
				checked:true,
				site:'四川省成都市武侯区武侯大道',
				list:['中国', '美国', '巴西', '日本'],
				index:0,
				name:'梁笑笑',
				mobile:'18000000000',
				detail:'顺江段77号'
			}
		},
		methods: {
			setDefault(){
				this.checked = !this.checked
			},
			chooseSite(){
				let _this = this
				uni.chooseLocation({
					success(res){
						_this.site = res.address
					}
				})
			},
			delAddress(){
				uni.showModal({
					content:'删除'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page{
		padding: 0 30rpx;
		font-family: PingFang SC;
		font-size: 28rpx;
		padding-top:15rpx;
	}
	.item{
		padding:23rpx 0;
		border-bottom: 1rpx solid #EEEEEE;
		.name{
			width:185rpx;
			font-size: 28rpx;
			font-weight: 400;
			color: #666666;
		}
		.site{
			font-size: 28rpx;
			color: #999999;
			width:400rpx;
		}
		.iconfont{
			font-size: 32rpx;
			color: #999999;
		}
	}
	.setDefault{
		margin:21rpx 0;
		color: #999999;
		font-size: 28rpx;
		color: #666666;
		.iconfont{
			font-size: 30rpx;
			margin-right: 18rpx;
		}
		.checked{
			color: #38BE8C;
		}
	}
	.btn{
		width: 690rpx;
		height: 90rpx;
		background: linear-gradient(86deg,#37bd8d 3%, #06adb9 97%);
		border-radius: 46rpx;
		font-size: 32rpx;
		font-weight: 700;
		text-align: center;
		line-height: 90rpx;
		color: #ffffff;
		position: fixed;
		bottom: 44rpx;
		left:30rpx;
	}
</style>
